<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script type="text/javascript" src="lib/jquery-3.1.1.min.js"></script>
<script src="lib/DDSort/ddsort.js"></script>
<script type="text/javascript" src="js/util.js"></script>
<script type="text/javascript" src="js/ui.js"></script>
<link rel="stylesheet" type="text/css" href="css/ui.css">
<link rel="stylesheet" type="text/css" href="css/1.css">
</head>
<body>



<div id="container" class="edit"></div>

<div id="toolbar" class="toolbar">
	<ul></ul>
</div>

<input type="hidden" name="">

<script type="text/javascript">

// var el = ui.image('https://www.baidu.com/img/baidu_jgylogo3.gif').appendTo(document.body);

var container = ui.init('#container');
container.onchildready = function(){
	console.log(this.getChildren())
};
container.onchildrenactive = function(doms){
	$('#toolbar > ul > li').removeClass('active');
	util.EACH(doms, function(dom){
		var q = '#toolbar>ul>li[target-id="' + dom.$id() + '"]';
		$(q).addClass('active');
	})
};

container.addImage('https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=306691084,3931829672&fm=23&gp=0.jpg');
container.addImage('https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=968733507,508860982&fm=11&gp=0.jpg');
container.addImage('https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=968733507,508860982&fm=11&gp=0.jpg');
container
	// .attr('x', 10)
	// .attr('y', 10)
	.attr('width', 480)
	.attr('height', 800)
	.update();

function createThumbList(container){
	var ul = [];
	util.HCAE(container.getChildren(), function(dom){
		ul.push('<li target-id="' + dom.$id() + '">'
			+ dom.$type() + '[' + dom.$id() + ']</li>')
	});
	util.$('#toolbar > ul').innerHTML = ul.join('');

	util.addEvent('#toolbar > ul', 'mousedown', function(e){
		if(e.target.nodeName != 'LI') return;
		$('#toolbar > ul > li').removeClass('active');
		$(e.target).addClass('active');

		var id = e.target.getAttribute('target-id');
		var layer = container.blurChildren().getById(id);
		layer.addClass('active');
	})
}

createThumbList(container);

util.addEvent(util.$('input'), 'change', function(e){
	container.addImage(this.files[0]);
	this.value = null;
});

$('#toolbar > ul').DDSort({
	target: 'li',		//示例而用，默认即'li'
	floatStyle: {
		'border': '0px solid #ccc',
		'background-color': '#555'
	},
	up: function(){
		// container.blurChildren(1);
		var ids = [];
		$('#toolbar > ul > li').each(function(index, el){
			ids.push(el.getAttribute('target-id') >> 0);
		});
		util.HCAE(ids, function(id){
			container.append(container.getById(id));
		})

	}
});


</script>

</body>
</html>